<template>
<div>
      <el-header class="head">
      <div>
        <img src="../assets/鸡蛋.png" alt="" class="home_pic">
        <span>eggBlog</span>
      </div>
      <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect" active-text-color="#409EFF">
        <el-menu-item index="1" @click="tohome">主页</el-menu-item>
        <el-menu-item index="2" @click="totype">分类</el-menu-item>
        <el-menu-item index="3" >个人中心</el-menu-item>
        <el-menu-item index="4" @click="tomanage">管理</el-menu-item>
      </el-menu>
      <div class="home_input">
       <el-col :span="20"  >
       <!-- <el-input
        placeholder="SerchBlogs"
        v-model="inputTitle"  @keyup.enter.native="search(inputTitle)">
        <i slot="prefix" class="el-input__icon el-icon-search" @click="search(inputTitle)"></i>
        </el-input> -->
        <a-input-search placeholder="SerchBlogs" style="width: 200px;positon:relative;top:15px" @search="search(inputTitle)" v-model="inputTitle"/>
      </el-col>
      </div>
      <div class="line"></div>
    <!-- <a style="font-size:15px;position:relative;top:18px" @click="toconfirm()">{{status}}</a> -->
    <el-button type="text" @click="open">{{status}}</el-button>
    
    </el-header>
<div id="info-side">
    
    <el-row class="tac">
      <el-col :span="12">
        <el-menu
          default-active="1"
          class="el-menu-vertical-demo"
          active-text-color="#409EFF">
          <router-link class="label info_label" to="/infoside/personal">
            <el-menu-item index="1">
              <i class="personInfo"></i>
              <span slot="title" >个人资料</span>
            </el-menu-item>
          </router-link>
          <router-link class="label col_label" to="/infoside/mycollect/details">
            <el-menu-item index="2">
              <i class="myCollection"></i>
              <span slot="title">我的收藏</span>
            </el-menu-item>
          </router-link>
          <router-link class="label up_label" to="/infoside/mythumbs">
            <el-menu-item index="3">
              <i class="thumbsUp"></i>
              <span slot="title">收到的赞</span>
            </el-menu-item>
          </router-link>
          <router-link class="label com_label" to="/infoside/mycomment">
            <el-menu-item index="4">
              <i class="comment"></i>
              <span slot="title">我的评论</span>
            </el-menu-item>
            </router-link>
            <a href="#" class="label blog_label" @click="tomanage">
              <el-menu-item index="5">
              <i class="toMyBlog"></i>
              <span slot="title">我的博客</span>
            </el-menu-item>
            </a>
            

        </el-menu>
      </el-col>
    </el-row>
    <div id="info-content">
      <router-view/>
    </div>
  </div>
</div>
  <!-- 侧边栏展示，博客管理跳转至管理-->
  
</template>

<script>
export default {
  methods: {
    tohome(){
      this.$router.push('/home')
    },
     tomanage(){
      if(window.sessionStorage.getItem('token')!=null)
      {
        this.$router.push('/list')
      }
      else if(window.sessionStorage.getItem('admintoken')!=null)
      {
        this.$router.push('/manage')
      }
      else{
        this.$router.push('/login')
      }
      },   
      search(inputTitle){
      window.sessionStorage.setItem('query',inputTitle)
      this.$router.push('/search')
    },
    totype(){
      this.$router.push('/type')
    }
  }
}
</script>

<style>
  #info-side{
    margin-top: 80px;
    margin-left: 150px;
  }
  .tac{
    width: 250px;
    display: inline;
    float: left;
    margin-right: -100px;
  }
  #info-content{
    width: 1000px;
    height: 550px;
    left: 320px;
    border: #D3D3D3 1px solid;
    position: absolute;
    float: left;
    display: inline;
  }
  #info-side .label {
  color: #2C3E50;
  text-decoration: none;
  }
  .image{
  height: 100px;
  width: 100px;
}
.home_container{
  height: 100%;
  width: 100%;
  background-color: #F2F2F2;
}
.head{
  background-color: #FFFFFF;
}
.el-header{
  background-color: Transparent;
  display: flex;
  justify-content: space-between;
  padding-left: 0;
  font-size: 20px;
}
.home_pic{
  height: 50px;
  width: 50px;
}
</style>
